<%@ Page Language="C#" AutoEventWireup="True" CodeBehind="Default.aspx.cs" Inherits="GeoZoneWeb._Default" %>
<%@ Register assembly="Artem.GoogleMap" namespace="Artem.Web.UI.Controls" tagprefix="artem" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>GeoZone map</title>
    <!--meta http-equiv="Content-Type" content="text/html; charset=utf-8" /-->
	<!--style type="text/css">@import "styles/zoommap.css";</style-->
	<style media="screen" type="text/css">
	    #map { float:left; width:500px; height:500px; }
	    #list { float:left; width:200px; background:#eee; list-style:none; padding:0; }
	    #list li { padding:10px; }
	    #list li:hover { background:#555; color:#fff; cursor:pointer; cursor:hand; }
	    #message { position:absolute; padding:10px; background:#555; color:#fff; width:75px; }
	    div.error { color:red; font-weight:bold; }
	</style>
	<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA7m6t-8cvuO70ahtGn7t41hSIm0qQwqOoVrT32VmSFzCf4N89MBQbKke-qrd_7jnG3C8gfPlPuMfO8A"></script>
    <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
	<script type="text/javascript" charset="utf-8">
	    google.load("maps", "2.x");
	    var map;
	    var geo;
	    var reasons;
	    $(document).ready(function() {
	        map = new GMap2(document.getElementById('map'));
	        var burnsvilleMN = new GLatLng(31.8667, 35.2167); //44.797916, -93.278046);
	        map.setCenter(burnsvilleMN, 8);
	        var bounds = map.getBounds();
	        var southWest = bounds.getSouthWest();
	        var northEast = bounds.getNorthEast();
	        var lngSpan = northEast.lng() - southWest.lng();
	        var latSpan = northEast.lat() - southWest.lat();
	        var markers = [];
	        var icon;
	        for (var i = 0; i < 10; i++) {
	            var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
	            //---------------custom icon---------------------//
	            icon = new GIcon();
	            icon.image = "icons/alien_32.png";
	            icon.iconSize = new GSize(32, 32);
	            icon.iconAnchor = new GPoint(8, 42);
	            icon.infoWindowAnchor = new GPoint(43, 6);
	            ///////////////////////////////////////////////////
	            marker = new GMarker(point, icon);
	            map.addOverlay(marker);
	            markers[i] = marker;
	        }
	        $(markers).each(function(i, marker) {
	            $("<li />")
						.html("Point " + i)
						.click(function() {
						    displayPoint(marker, i);
						})
						.appendTo("#list");

	            GEvent.addListener(marker, "click", function() {
	                displayPoint(marker, i);
	            });
	        });
	        $("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
	        geo = new GClientGeocoder();
	        reasons = [];
	        reasons[G_GEO_SUCCESS] = "Success";
	        reasons[G_GEO_MISSING_ADDRESS] = "Missing Address";
	        reasons[G_GEO_UNKNOWN_ADDRESS] = "Unknown Address.";
	        reasons[G_GEO_UNAVAILABLE_ADDRESS] = "Unavailable Address";
	        reasons[G_GEO_BAD_KEY] = "Bad API Key";
	        reasons[G_GEO_TOO_MANY_QUERIES] = "Too Many Queries";
	        reasons[G_GEO_SERVER_ERROR] = "Server error";
	    });
	    function displayPoint(marker, i) {
	        $("#message").hide();
	        var moveEnd = GEvent.addListener(map, "moveend", function(){
	            var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng());
	            $("#message")
	                .fadeIn()
	                .css({ top:markerOffset.y, left:markerOffset.x });
	            GEvent.removeListener(moveEnd);
	        });
	        map.panTo(marker.getLatLng());
	        //map.setZoom(2);
	    }

	    //--------Ajax set current location--------------------------//
	    $("input[id$='btnLocateOnMap']").click( function() {
	        geoEncode();
	        return false;
	    });
	    
	    

	    function geoEncode() {
	        var address = $("input[id$='txtCurrAddress']").val();
	        geo.getLocations(address, function(result) {
	            if (result.Status.code == G_GEO_SUCCESS) {
	                geocode = result.Placemark[0].Point.coordinates;
	                savePoint(geocode);
	            } else {
	                var reason = "Code " + result.Status.code;
	                if (reasons[result.Status.code]) {
	                    reason = reasons[result.Status.code]
	                }
	                $("#error").html(reason).fadeIn();
	                geocode = false;
	            }

	        });
	    }

	    function savePoint(geocode) {
	        var data = $("#add-point :input").serializeArray();
	        data[data.length] = { name: "lng", value: "Self location" };
	        data[data.length] = { name: "lat", value: geocode[1] };
	        //---------Calling code behind using ajax--------------------//
	        $("#error").fadeOut();
	        $.ajax({
	            type: "POST",
	            url: "GZMap.aspx/SetLocationOnMap",
	            data: "{}",
	            contentType: "application/json; charset=utf-8",
	            dataType: "json",
	            error: function(request, error) {
	                $("#error").html(request).fadeIn();
	            },
	            success: function(msg) {
	                $("input[id$='txtCurrAddress']").val("");
	                var location = json.data;
	                addLocation(location);
	                zoomToBounds();
	            }
	        });
	        ///////////////////////////////////////////////////////////////
	    }

	    function addLocation(location) {
	        var point = new GLatLng(location.lat, location.lng);
	        var marker = new GMarker(point);
	        map.addOverlay(marker);
	        bounds.extend(marker.getPoint());
	        $("<li />")
	            .html(location.name)
	            .click(function() {
	                showMessage(marker, location.name);
	            })
	            .appendTo("#list");
	        GEvent.addListener(marker, "click", function() {
	            showMessage(this);
	        });
	    }

	    function zoomToBounds() {
	        map.setCenter(bounds.getCenter());
	        map.setZoom(map.getBoundsZoomLevel(bounds) - 1);
	    }
	    ///////////////////////////////////////////////////////////////
	</script>
	<!--script type="text/javascript" src="js/zoommap.js"></script-->
	<!--script type="text/javascript" src="js/setup.js"></script-->	    
</head>
<body>
    <form id="form1" runat="server">
    <table>
        <tr>
            <td>
                <div class="error" style="display:none;"></div>
            </td>
        </tr>
        <tr>
            <td>My current location address is:</td>
            <td>
                <asp:TextBox ID="txtCurrAddress" runat="server"></asp:TextBox>
            </td>
            <td>
                <asp:Button ID="btnLocateOnMap" runat="server" Text="Set location" />
            </td>
        </tr>
    </table>
    <div id="mainDIV">
        <div id="map"></div>
        <ul id="list"></ul>
        <div id="message" style="display:none;">
            Test text.
        </div>
        <artem:GoogleMap ID="GoogleMap1" runat="server" Width="530px" Height="500px" Latitude="42.1229" Longitude="24.7879" Zoom="5">
        </artem:GoogleMap>
    </div>
    </form>
</body>
</html>
